<template>
	<view class="work_content">
		<!-- 头部 -->
		<view class="work_header">
            <!-- <view class="work_header_top">
				<view class="work_left">
					<view class="work_item">工号：10086</view>
					<view class="work_item">员工：10086</view>
					<view class="work_item">部门：10086</view>
				</view>

				<view style="width: 30%;">
					<uni-data-select
						v-model="form.filterMenu"
						placeholder="默认排序"
						:localdata="filtrList"
						></uni-data-select>
				</view>
			</view> -->

			<view class="header_amount">
				<view class="amount_item" v-for="(item, index) in amountList" :key="index">
					<view>￥ {{ item.sl }}</view>
					<view class="amount_name"> {{ item.name }}</view>
					<view v-if="index != amountList.length - 1" class="amount_line"></view>
				</view>
			</view>
		</view>
		<!--  -->

		<view class="work_list">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view v-for="(item, index) in menusList" :key="index">
					<!--  -->
					<uni-grid :showBorder="false" :column="5" :highlight="true">
						<uni-grid-item v-for="(i, j) in item" :key="j" >
							<view class="grid_item_box" @click="handleGoPages(i)">
								<text class="iconfont" :class="i.icon"></text>

								<view class="grid_item_name">{{ i.name }}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import customHeader from "@/components/custom-header/custom-header.vue";
import utils from "@/utils/utils.js";
import Http from '@/service/api'
	export default {
		components: {
			customHeader,
        
		},
		data() {
			return {
				form: {},
				filtrList: [
                    { value: 0, text: "默认排序" },
                    { value: 1, text: "订量多到少" },
                    { value: 2, text: "订量少到多" },
                    { value: 3, text: "价格高到低" },
                    { value: 4, text: "价格低到高" },
                ],
				amountList: [
					{ name: '销售业绩', sl: 0 },
					{ name: '退货金额', sl: 0 },
					{ name: '毛利金额', sl: 0 },
				],
				menusList: [ // 菜单列表
					[
						{ name: '销售订单', icon: 'icon-xiaoshoudingdan', path: './xsdd', param: '', isScan: false }, 
						{ name: '销售发货单', icon: 'icon-xiaoshoufahuodan', path: './xsfhdForm', param: '', isScan: false }, 
						// { name: '销售发货单', icon: 'icon-xiaoshoufahuodan', path: './xsfhd', param: '', isScan: false }, 
						{ name: '收款单', icon: 'icon-xiaohuo', path: './skd', param: '', isScan: false }, 
						{ name: '货号管理', icon: 'icon-huohao', path: '../huohaoManage/index', param: '', isScan: false }, 
					]
				], 
			}
		},
        computed: {},
		onLoad() {
			let a = []
			for(let i = 0; i < 53; i++) {
				a.push({
					name: `菜单- ${i}`,
					icon: 'icon-xiaoshoudingdan',

				})
			}

			// this.menusList =  utils.splitArray(a, 5)
		},
		onShow() {
			this.getPerformPresentationInfo()
		},
		methods: {
            handleGoPages(item) {
				console.log('== item ', item)
				if (!!item.isScan) {

				} else if (!!item.path) {
					uni.navigateTo({
						url: `${item.path}?param=${item.param}`
					})
				}
			},
			getPerformPresentationInfo() {
				Http.getPerformPresentationInfo().then(r => {
					this.amountList = [
						{ name: '销售业绩', sl: r.fhje },
						{ name: '退货金额', sl: r.thje },
						{ name: '毛利金额', sl: r.mlje },
					]
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
.work_content {
    height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 16rpx;

	.work_header {
		width: 100%;
		padding: 15rpx 10rpx;
		box-sizing: border-box;
		
		.work_header_top {
			display: flex;
			align-items: center;
			border-bottom: 2rpx dashed #cbcbcb;
			padding-bottom: 10rpx;
		}

		.work_left {
			flex: 1;
			display: flex;
			align-items: center;

			.work_item {
				margin-right: 20rpx;
			}
		}

		.header_amount {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			padding-top: 20rpx;
			font-size: 30rpx;

			.amount_item {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #f9a94d;

				.amount_name {
					margin-top: 10rpx;
					font-size: 20rpx;
				}

				.amount_line {
					position: absolute;
					bottom: 10rpx;
					right: 0;
					width: 2rpx;
					height: 50rpx;
					border-right: 2rpx dashed #c3c3c3;
				}
			}
		}
	}

	.work_list {
		flex: 1;
		overflow: auto;
		background: #f5f5f5;
		padding-top: 5rpx;
		padding-left: 5rpx;

		/deep/ .uni-grid-item{
			height: 180rpx !important;
		}

		.grid_item_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			margin-right: 5rpx;
			margin-bottom: 5rpx;
			background-color: #fff;
			border-radius: 5rpx;
			color: #f9a94d;

			.iconfont {
				padding: 20rpx 0rpx;
				font-size: 80rpx;
			}

			.grid_item_name {
				font-size: 20rpx;
			}
		}
	}
}
</style>
